<template>
  <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    <el-avatar  :src="getuserInfo.photoUrl"></el-avatar>
  </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="a">查看个人信息</el-dropdown-item>
      <el-dropdown-item command="b">退出登录</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
<!--  <el-button type="text" @click="HandLogOut">退出登陆</el-button>-->
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "HeaderLogin",
  computed:{
    ...mapState({
      getuserInfo:state => state.user.userInfo
    })
  },
  methods:{
    HandLogOut() {
      this.$store.dispatch("Logout")
      this.$router.push('/home')
    },
    handleCommand(command) {
      if (command === 'a'){
        this.$router.push('/userInfo')
      }
      if (command ==='b'){
        console.log('退出登录了')
        this.HandLogOut()
      }
    }
  }
}
</script>

<style scoped>
.el-avatar{
  margin-top: 5px;
}

</style>
